<template>
  <div class="countryDialog search-info" v-if="visible">
    <div class="icon">
      <ArrowLeft
        :class="['back', searchInfoType === 'country' ? 'hidden-icon' : '']"
        @click="backData"
        style="width: 1em; height: 1em; color: #f2f2f2; cursor: pointer"
      />
      <Close
        class="Close"
        @click="showSearchClick"
        style="width: 1em; height: 1em; color: #f2f2f2; cursor: pointer"
      />
    </div>
    <div class="info-box">
      <div class="info-content">
        <div
          :class="['info-content_item', searchInfoType]"
          v-for="(item, i) in searchInfoType === 'country'
            ? formData_handle
            : list"
          :key="i"
          @click="clickCountry(item)"
        >
          <img
            class="info-content_item-img"
            :src="`https://lycm-food.oss-cn-chengdu.aliyuncs.com/school/${item.picture}`"
            alt=""
          />
          <span
            style="padding: 0 0 0 3px"
            class="title_"
            :title="item.NameEn"
            >{{ item.NameEn }}</span
          >
          <span
            class="budge"
            v-if="searchInfoType === 'country'"
            v-show="item.schoolNum > 0"
            >{{ item.schoolNum }}</span
          >
        </div>
      </div>
    </div>
    <div class="page" v-if="!isPhone">
      <div>
        <span
          @click="pageChange(i)"
          :class="['page-item', i === current ? 'active' : '']"
          v-for="(item, i) in Array(
            Math.ceil(
              (searchInfoType === 'country' ? formData : list).length / 24
            )
          )"
          :key="i"
        ></span>
      </div>
    </div>

    <!-- <div class="bottom">
      <div class="home">home</div>
      <div class="select">
        <span>asia</span>
        <span>japan</span>
        <span>千叶大学</span>
        <Close
          class="close"
          style="width: 18px; height: 15px; margin-right: 8px"
        />
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch, computed } from 'vue'
import { schoolList } from '@/api/home'
import { ElMessage } from 'element-plus'
const props = defineProps(['modelValue', 'formData', 'isPhone'])
const emit = defineEmits(['clickSchool', 'update:modelValue'])
let current = ref(0)
let searchInfoType = ref('country') // 可选值 country shcool
let list = ref([]) // 可选值 country shcool
const pageChange = (i) => {
  current.value = i
}
const showSearchClick = (i) => {
  searchInfoType.value = 'country'
  current.value = 0
  emit('update:modelValue', false)
}

const backData = (i) => {
  searchInfoType.value = 'country'
  list.value = []
}

const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const formData_handle = computed(() => {
  return props.isPhone
    ? props.formData
    : props.formData.slice(current.value * 24, (current.value + 1) * 24)
})
const clickCountry = (val) => {
  // 点击国家
  if (searchInfoType.value === 'country') {
    if (!val.schoolNum || val.schoolNum === 0) {
      ElMessage({
        type: 'warning',
        message: '所选国家暂无合作学校',
      })
      return
    }
    schoolList({
      areaId: val.id,
    }).then((res) => {
      let arr = res.data.map((v) => {
        return {
          ...v,
          NameEn: v.chinaName,
          picture: val.picture,
        }
      })
      list.value = arr
      searchInfoType.value = 'shcool'
    })
  } else {
    // 点击学校
    emit('clickSchool', val)
  }
}
</script>

<style  lang='scss'>
.countryDialog {
  width: 52%;
  height: 60%;
  background-color: #fff;
  position: absolute;
  top: 20%;
  left: 24%;
  padding: 10px 20px;
  background: rgba(3, 30, 35, 0.97);
  box-shadow: -4px 13px 16px 8px rgba(141, 141, 141, 0.3);
  border-radius: 8px 8px 8px 8px;
  box-sizing: border-box;
  .icon {
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: space-between;
    text-align: right;
    position: relative;
    // .Close {
    //   position: absolute;
    //   top: -10px;
    //   right: -15px;
    // }
    .hidden-icon {
      visibility: hidden;
    }
  }
  .info-box {
    width: 100%;
    width: 100%;
    height: calc(100% - 60px);
    box-sizing: border-box;
    margin-top: 20px;
    .title {
      height: 30px;
      line-height: 30px;
      margin: 0;
      font-size: 14px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: #8f8f8f;
    }
    .info-content {
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      &_item {
        margin-right: calc(10% / 6);
        cursor: pointer;
        position: relative;
        .budge {
          position: absolute;
          top: -9px;
          // right: 2px;
          left: 100px;
          display: inline-block;
          width: 20px;
          height: 20px !important;
          border-radius: 100%;
          border: 1px solid #ecf0f3;
          background-color: red;
          color: #ecf0f3 !important;
          text-align: center;
          line-height: 20px;
          font-size: 12px;
          // visibility: hidden;
        }
      }
      .country {
        width: 15%;
        height: 25%;
        text-align: left;
        img {
          // width: 100%;
          height: 80px;
          border-radius: 8px 8px 8px 8px;
        }
        span {
          display: inline-block;
          height: 30px;
          color: #ecf0f3;
        }
        .title_ {
          width: 100%;
        }
      }
      .shcool {
        width: 15%;
        height: calc(100% / 12);
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          border-radius: 100%;
        }
        span {
          display: inline-block;
          color: #ecf0f3;
          margin-left: 8px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      &_item:hover {
        span {
          color: #00b5c2;
        }
        .budge {
          visibility: visible;
          display: inline-block !important;
        }
      }
    }
  }
  .page {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      display: flex;
      .page-item {
        display: block;
        width: 13px;
        height: 13px;
        background-color: #646464;
        border-radius: 100%;
        margin-left: 8px;
        cursor: pointer;
      }
      .page-item:hover {
        background-color: #fff;
      }
      .active {
        background-color: #fff;
      }
    }
  }
  .bottom {
    width: 560px;
    height: 76px;
    display: flex;
    align-items: center;
    background: #031e23;
    padding: 8px;
    justify-content: space-around;
    margin-top: 20px;
    margin-left: calc(50% - 260px);
    border-radius: 8px;
    div {
      border-radius: 8px;
    }
    .home {
      width: 123px;
      height: 62px;
      background: #023640;
      line-height: 62px;
      text-align: center;
      color: #ecf0f3;
      font-size: 14px;
    }
    .select {
      width: 406px;
      height: 62px;
      background: #404e50;
      padding: 8px 0;
      color: #ecf0f3;
      font-size: 14px;
      display: flex;
      align-items: center;
      position: relative;
      span {
        display: inline-block;
        min-width: 69px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }
      .active {
        border: 1px solid #acacad;
        border-radius: 8px;
      }
      .close {
        position: absolute;
        top: 23px;
        right: 10px;
        color: #ecf0f3;
        cursor: pointer;
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .countryDialog {
    width: 96%;
    min-height: 550px;
    height: 80% !important;
    overflow: auto;
    left: 2%;
    padding: 6px 20px;
    top: 18%;
    // .icon {
    //   position: fixed;
    //   top: 20%;
    //   right: calc(2% + 10px);
    // }
    .country {
      width: 31% !important;
      height: 18% !important;
      margin-right: 2% !important;
      text-align: center !important;
      img {
        height: 60px !important;
      }
      .budge {
        left: calc(100% - 24px) !important;
      }
    }
    .shcool {
      width: calc(50% - 5px) !important;
      margin-right: 5px !important;
      .title_ {
        font-size: 12px;
      }
    }
  }
}
</style>
